<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="header (title)">
        <head>
            <title th:text="${title}"></title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="keywords" content="" />
            <script type="application/x-javascript">
                addEventListener("load", function() {
                    setTimeout(hideURLbar, 0);
                }, false);
                function hideURLbar(){
                    window.scrollTo(0,1);
                }
            </script>
            <link th:href="@{${path} + '/css/bootstrap.css'}"  rel="stylesheet" type="text/css" media="all" />
            <link th:href="@{${path} + '/css/style.css'}"  rel="stylesheet" type="text/css" media="all" />
            <link th:href="@{${path} + '/css/popuo-box.css'}"  rel="stylesheet" type="text/css" property="" media="all" />
            <link th:href="@{${path} + '/css/flickerplate.css'}" type="text/css" rel="stylesheet" media="all" />
            <!-- //js -->
            <!--<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>-->
            <!--<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>-->
            <!-- start-smoth-scrolling -->
            <script type="text/javascript" th:src="@{${path} + '/js/jquery-2.1.4.min.js'}"></script>
            <script type="text/javascript" th:src="@{${path} + '/js/move-top.js'}"></script>
            <script type="text/javascript"  th:src="@{${path} + '/js/easing.js'}"></script>
            <script type="text/javascript">
                jQuery(document).ready(function($) {
                    $(".scroll").click(function(event){
                        event.preventDefault();
                        $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
                    });
                });
            </script>
        </head>
    </div>


    <div th:fragment="container-header(index)">
        <div class="header">
            <div class="container">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="logo">
<!--                            <h1><a class="navbar-brand" th:href="@{${path}}">不达意</a></h1>-->
                            <a class="" th:href="@{${path}}">
                                <img th:src="@{${imagePath} + '/common/logo.png'}" alt="不达意" style="max-height: 86px;width: 138px;"/>
                            </a>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                        <nav>
                            <ul class="nav navbar-nav">
                                <li th:class="${index==0 ? 'active' : ''}">
                                    <a th:href="@{${path}}">主页</a>
                                </li>
                                <li th:class="${index==1 ? 'active' : ''}">
                                    <a th:href="@{${path + '/service'}}" class="hvr-sweep-to-bottom">服务</a>
                                </li>
                                <li th:class="${index==2 ? 'active' : ''}">
                                    <a th:href="@{${path} + '/short/code'}"  class="hvr-sweep-to-bottom">短句</a>
                                </li>
                                <li th:class="${index==3 ? 'active' : ''}">
                                    <a th:href="@{${path} + '/article'}" href="/short-codes.html" class="hvr-sweep-to-bottom">文章</a>
                                </li>
                                <li th:class="${index==4 ? 'active' : ''}">
                                    <a th:href="@{${path} + '/about/us'}" href="/templates/mail.html" class="hvr-sweep-to-bottom">关于我们</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <div th:fragment="footer">
        <div class="footer">
            <div class="container">
                <div class="col-md-4 agileinfo_footer_grid">
                    <h4>About Us</h4>
                    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                        fugiat nulla pariatur. <span>Excepteur sint occaecat cupidatat non proident
					sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>
                </div>
                <div class="col-md-4 agileinfo_footer_grid">
                    <h4>Instagram Posts</h4>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/3.jpg'}" alt="" class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/12.jpg'}"  alt="" class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/5.jpg'}" alt="" class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/7.jpg'}"  alt=" " class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/8.jpg'}"  alt=" " class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/5.jpg'}"  alt=" " class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img  th:src="@{${imagePath} + '/common/9.jpg'}" alt=" " class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/10.jpg'}"  alt=" " class="img-responsive"></a>
                    </div>
                    <div class="agileinfo_footer_grid1">
                        <a href="/single.html"><img th:src="@{${imagePath} + '/common/11.jpg'}" alt=" " class="img-responsive"></a>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <div class="col-md-4 agileinfo_footer_grid">
                    <h4>Address</h4>
                    <ul>
                        <li><span class="glyphicon glyphicon-home" aria-hidden="true"></span> 738 Diamond Road, New York City, USA.</li>
                        <li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:info@example.com">info@example.com</a></li>
                        <li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> (0123) 0111 111 222</li>
                    </ul>
                </div>
                <div class="clearfix"> </div>
                <div class="w3agile_footer_copy">
                    <p>Copyright &copy; 2020.不达意.<a target="_blank" th:href="${path}">仅做交流使用</a></p>
                </div>
            </div>
        </div>
    </div>
</html>